# Fields schema

The fields schema is the one that describes how the UI of your plugin should look like. It has access to a variety of UI
fields which it can show in the UI as the form data for the users to put their input. Each Field schema creates a UI
component in the form that you want to build.

## Properties

| Property | Description | Value Type |
|  --- | --- | --- |
| key * | The unique identifier of the UI component. It is also the variable name when you try to access the value that user put on that component. | [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#string_type) |
| label | The Description of the UI component that you want to build. | [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#string_type) |
| helpText | The help text to show on the UI component that you want to build. It can be written as plain text or markdown. | [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#string_type) |
| required | Defines if the user needs to fill in the value in the UI component that you want to build. | [boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) |
| type | The type of the UI component to be built. The values that it can have are:1. boolean 2. text3. dict4. string5. static-hook-url | [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#string_type) |
| choices | The choices to be provided for the dropdown. | [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#string_type) |
| default | The default value to be shown in the UI component that you want to build. |  |
| dynamic | The dynamic filed you want to show to the user. | [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#string_type) |


Detailed information on how to create each of the supported UI components can be found
[here](/docs/chatlayer/app-schema). [Interpolations](/docs/chatlayer/basics/references) can be used in these UI
components.

Different types of UI components can be created using the different values in the `type` property.

## Types of fields

### Boolean

If you want to have a checkbox then you should use the boolean as the type. The value retrieved from this kind of UI
component is always going to
be [boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)


```javascript
{
    fields: [
        {
            key: "private",
            label: "Private",
            type: "boolean",
            helpText:
                "Indicate whether these notes needs to be Private or Public ( Visible to everyone on the portal ).",
        },
    ]
}
```

![boolean_field.png](/assets/boolean_field.7a0482c63d24e615b87654b7f237688664b6b1c385b88f01ed7ae8aae04946ed.9c5a8d95.png)

### Text

If you want to create a multiline Text-box component, then the `type` property should be set to `text`.


```javascript

{
    fields: [
        {
            key: "notes",
            label: "Notes",
            type: "text",
            helpText: "The notes that need to be added to the Ticket.",
        },
    ]
}
```

![text_field.png](/assets/text_field.5552c1bafe1662eb87f9a13d08e6dea7c52133be738154d1073c0a3c22d13899.9c5a8d95.png)

### Dict

If you want to show dynamic key value pairs in the UI then `dict` component will come in handy. It is used to get
the [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object). It creates a
dynamic list of two input fields in a line where the first one is considered as a key and the second one is the value.
Both key and value are of
type [strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String).


```javascript
      {
    fields: [{
        key: "custom_fields",
        label: "Custom fields",
        type: "dict",
        helpText: "Provide any aditional customs fields as **key/value** pairs",
    }]
}
```

![custom_field.png](/assets/custom_field.7d58fefa8804b5540cb6cadb827319e3895226e6ceef44d1fe4587c02abee1ea.9c5a8d95.png)

### Dynamic fields

Certain fields may require data fetched from outside the system. Dynamic fields allow you to show external data a form
and use the selected data elsewhere in the flow.

To create a dynamic field, the `dynamic` field should follow a specific structure: `resource_id.identifier.label`

| Name | Meaning |
|  --- | --- |
| resource_id | The name of the resource you want to target, see [Resources](/docs/chatlayer/app-schema/resources-schema) for more information |
| identifier | Unique ID differentiating one item from the other. This is the field name of an element of your resource data |
| label | This is a field inside a resource entry that will be used to visually show that element to a user. |